<template>
	<div class="my-sketch-rule">
		<!-- 尺子 -->
		<sketch-rule
			:thick="thick"
			:scale="scale"
			:width="layoutDomWidth"
			:height="layoutDomHight"
			:startX="startX"
			:startY="startY"
			:lines="lines"
			:palette="paletteStyle"
		/>
		<div ref="$app" class="edit-screens">
			<div
				ref="$container"
				class="edit-screen-container"
				:style="{
					width: `${$store.chart.editCanvasConfig.width * 2}px`,
					height: `${$store.chart.editCanvasConfig.height * 2}px`
				}"
			>
				<div
					ref="$SketchRuleBox"
					class="canvas"
					@mousedown="dragCanvas"
					:style="{
						marginLeft: '-' + (layoutDomWidth / 2 - 25) + 'px',
						cursor: $store.chart.KeyboardActive.space ? 'grab' : 'auto'
					}"
				>
					<slot></slot>
				</div>
			</div>
		</div>
		<!-- 修复右下角白点用的 -->
		<div class="fix-edit-screens-block" />
	</div>
</template>

<script setup>
// 引入标尺
import { SketchRule } from 'vue3-sketch-ruler';
import 'vue3-sketch-ruler/lib/style.css';
import { listen } from 'dom-helpers';
import { useElementBounding } from '@vueuse/core';

// 标尺配置
const thick = 20,
	startX = ref(0),
	startY = ref(0),
	lines = reactive({ h: [], v: [] });

// 主题
const paletteStyle = {
	bgColor: '#18181c',
	longfgColor: '#4d4d4d',
	shortfgColor: '#4d4d4d',
	fontColor: '#4d4d4d',
	shadowColor: '#18181c',
	borderColor: '#18181c',
	cornerActiveColor: '#18181c'
};

const $app = shallowRef(),
	$container = shallowRef(),
	$SketchRuleBox = shallowRef();

// 拖拽处理
let prevMoveXValue = [0, 0],
	prevMoveYValue = [0, 0];
function dragCanvas(e) {
	e.preventDefault();
	e.stopPropagation();

	// 没有按下空格
	if (!$store.chart.KeyboardActive.space) return;

	document.activeElement?.blur();

	const startX = e.pageX;
	const startY = e.pageY;

	const listenMousemove = listen(window, 'mousemove', (e) => {
		const nx = e.pageX - startX;
		const ny = e.pageY - startY;
		const [prevMoveX1, prevMoveX2] = prevMoveXValue;
		const [prevMoveY1, prevMoveY2] = prevMoveYValue;
		prevMoveXValue = [prevMoveX2, nx];
		prevMoveYValue = [prevMoveY2, ny];
		$app.value.scrollLeft -=
			prevMoveX2 > prevMoveX1 ? Math.abs(prevMoveX2 - prevMoveX1) : -Math.abs(prevMoveX2 - prevMoveX1);
		$app.value.scrollTop -=
			prevMoveY2 > prevMoveY1 ? Math.abs(prevMoveY2 - prevMoveY1) : -Math.abs(prevMoveY2 - prevMoveY1);
	});
	const listenMouseup = listen(window, 'mouseup', () => {
		listenMousemove();
		listenMouseup();
		prevMoveXValue = [0, 0];
		prevMoveYValue = [0, 0];
		$store.chart.KeyboardActive.space = false;
	});
}

// 缩放比例
const scale = computed(() => $store.chart.editCanvas.scale),
	// 滚动条拖动的宽高为编辑区的两倍
	{ width, height } = $store.chart.editCanvasConfig;

// 计算画布大小
let layoutDomWidth = ref(width),
	layoutDomHight = ref(height);
function canvasBox() {
	const layoutDom = $store.chart.editCanvas.editLayoutDom;
	layoutDomWidth.value = layoutDom.clientWidth - thick;
	layoutDomHight.value = layoutDom.clientHeight - thick - 40;
}

// 滚动条处理
const { top, left } = useElementBounding($SketchRuleBox);
watch([top, left], () => {
	const screensRect = $app.value.getBoundingClientRect();
	// 标尺开始的刻度
	startX.value = (screensRect.left + thick - left.value) / scale.value;
	startY.value = (screensRect.top + thick - top.value) / scale.value;
});

// 滚动条居中
watch([() => $store.chart.editCanvas.editLayoutDom?.clientWidth, scale], () => {
	canvasBox();
	if ($container.value) {
		const { width, height } = $container.value.getBoundingClientRect();
		$app.value.scrollLeft = width / 2 - layoutDomWidth.value / 2;
		$app.value.scrollTop = height / 2 - layoutDomHight.value / 2;
	}
});
</script>

<style>
/* 使用 SCSS 会报错，直接使用最基础的 CSS 进行修改，
此库有计划 Vue3 版本，但是开发的时候还没发布 */
#mb-ruler {
	top: 0;
	left: 0;
}

/* 横线 */
#mb-ruler .v-container .lines .line {
	/* 最大缩放 200% */
	width: 200vw !important;
	border-top: 1px dashed var(--el-color-primary) !important;
}

#mb-ruler .v-container .indicator {
	border-bottom: 1px dashed var(--el-color-primary) !important;
}

/* 竖线 */
#mb-ruler .h-container .lines .line {
	/* 最大缩放 200% */
	height: 200vh !important;
	border-left: 1px dashed var(--el-color-primary) !important;
}

#mb-ruler .h-container .indicator {
	border-left: 1px dashed var(--el-color-primary) !important;
}

/* 坐标数值背景颜色 */
#mb-ruler .indicator .value {
	background-color: rgba(0, 0, 0, 0);
	color: var(--el-text-color-primary);
}

/* 删除按钮 */
#mb-ruler .line .del {
	padding: 0;
	color: var(--el-color-primary);
	font-size: 26px;
	font-weight: bolder;
}

#mb-ruler .corner {
	border-width: 0 !important;
}
</style>

<style lang="scss" scoped>
@include b('sketch-rule') {
	position: relative;
	overflow: hidden;
	width: 100%;
	height: 100%;

	.edit-screens {
		position: absolute;
		width: 100%;
		height: 100%;
		overflow: auto;
		user-select: none;
		padding-bottom: 0px;

		/* firefox */
		scrollbar-color: rgba(144, 146, 152, 0.3) transparent;
		scrollbar-width: thin;

		/* chrome */
		&::-webkit-scrollbar,
		&::-webkit-scrollbar-track-piece {
			background-color: transparent;
		}

		&::-webkit-scrollbar {
			width: 7px;
		}

		&::-webkit-scrollbar-thumb {
			border-radius: 5px;
			background-color: rgba(144, 146, 152, 0.3);
		}
	}

	.fix-edit-screens-block {
		position: absolute;
		bottom: 0;
		right: 0;
		width: 10px;
		height: 10px;
		background-color: var(--color-bg-1);
	}

	.edit-screen-container {
		position: absolute;
		top: 0;
		left: 0;
	}

	.canvas {
		position: absolute;
		top: 50%;
		left: 50%;
		transform-origin: 50% 0;
		transform: translateY(-50%);
	}
}
</style>
